<script setup>
import { ref } from 'vue'
import { getFilmListApi } from '@/api/film';


const props = defineProps({
    type: {
        type: Number,
        default: 1,
    }
})

const list = ref([]);

// loading:控制加载转圈特效
const loading = ref(false);
// finished：没有更多的数据
const finished = ref(false);
const page = { pagenum: 0, pagesize: 10, type: props.type }
console.log(list);



// 
const onLoad = async () => {
    page.pagenum++
    // 发送ajax去服务器要数据
    const { data: res } = await getFilmListApi(page)
    //  手动关闭loading
    loading.value = false

    list.value = [...list.value, ...res.list]
    // 当数据加载完毕时
    if (list.value.length >= res.total) {
        finished.value = true
    }


};

</script>

<template>

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

        <van-cell v-for="item in list" :key="item.id" center>
            <template #title>
                <van-card :thumb="`${item.poster}`">
                    <template #title>
                        <span>{{ item.name }}</span>
                        <van-tag text-color="ffffff" color="#cccccc" size="large"> 2D </van-tag>
                    </template>
                    <template #desc>
                        <div>
                            <ul>
                                <li>观众评分<span style="color:#f4b959 ;">{{ item.grade }}</span></li>
                                <li>主演:<span>{{ }}</span></li>
                                <li>{{ item.nation }} |{{ item.runtime }} 分钟</li>
                                <li>{{ item.address }}</li>
                            </ul>
                        </div>
                    </template>
                </van-card>
            </template>

            <template #right-icon>
                <van-button size="mini">购买</van-button>
            </template>

        </van-cell>

    </van-list>

</template>

<style scoped lang="less">
.van-list {
    padding-bottom: 40px;

    .van-card {
        background-color: #ffffff;
        padding: 10px;
        ul {
            line-height: 12px;
            font-size: 10px;
            color: #969799;
        }
    }

    .van-button {
        width: 40px;
        margin-right: 15px;
        border: 1px solid #ff5f16;
        color: #ff5f16;
    }
}
</style>